<template>
    <div class="container">
        <div>
            <el-steps :active="step" align-center style="margin-bottom: 50px;">
                <el-step title="Step 1" description="请输入您的手机号" />
                <el-step title="Step 2" description="请输入您的用户名" />
                <el-step title="Step 3" description="请输入验证码" />
                <el-step title="Step 4" :status="status" description="获得新密码" />
            </el-steps>
          
            <div class="step_div" v-show="step == 1">
                <el-input size="large" v-model="form.phone" placeholder="请输入您的手机号" style="width: 50%;margin: 20px 0;"></el-input>
            </div>
            <div class="step_div" v-show="step == 2">
                <el-input size="large" v-model="form.username" placeholder="请输入您的用户名" style="width: 50%;margin: 20px 0;"></el-input>
            </div>
            <div class="step_div" v-show="step == 3">
                <el-input size="large" v-model="form.code" placeholder="请输入验证码" style="width: 50%;margin: 20px 0;"></el-input>
                <ValidCode @imgCode="createImgCode" />
            </div>
            <div class="step_div" v-show="step == 4">
                <span v-show="newPWD != ''">请牢记您的新密码：<span style="font-size: 50px;">{{newPWD}}</span></span>
            </div>
            <el-button v-show="step > 1 && step < 4" size="large" type="primary" @click="step--">上一步</el-button>
            <el-button v-show="step < 4" size="large" type="primary" @click="check()">下一步</el-button>
            <el-button v-show="step == 4" size="large" type="primary" @click="step = 1">重新开始</el-button>
            <el-button v-show="step == 4" size="large" type="primary" @click="$router.push('/')">返回主页</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import ValidCode from '@/components/ValidCode.vue';
import request from '@/utils/request';
const step = ref(1)
const status = ref('wait')
const form = reactive({
    phone:'',
    username: '',
    code: '',
})
const rulePhone = () =>{
    const rule = /^(?:(?:\+|00)86)?1\d{10}$/
    const res = rule.test(form.phone)
    return res
}
const ruleUsername = () =>{
    const rule = /^[a-zA-Z0-9_-]{4,16}$/
    const res = rule.test(form.username)
    return res
}
//验证码生成并获取子级组件中的验证码
const imgCode = ref('')
const createImgCode = (data: any) => {  //获取子级组件返回的验证码，进行比对
    // console.log(data)
    imgCode.value = data
}
const ruleCode = () =>{
    if(form.code.toLowerCase() === imgCode.value.toLowerCase()){
        return true
    }else{
        return false
    }
}
const check = () =>{
    if(step.value == 1){
        if(rulePhone()){
            // ElMessage.success('合法')
            step.value ++
        }else{
            ElMessage.error('手机号码格式不正确')
        }
        return
    }
    if(step.value == 2){
        if(ruleUsername()){
            // ElMessage.success('合法')
            step.value ++
        }else{
            ElMessage.error('用户名格式不正确')
        }
        return
    }
    if(step.value == 3){
        if(ruleCode()){
            step.value ++
            resetPWD()
        }else{
            ElMessage.error('验证码不正确')
        }
        return
    }
    if(step.value == 4){
        resetPWD()
        return
    }
}
const newPWD = ref('')
const resetPWD = () =>{
    request.post('/h/user/resetPassword', null,{
                params:{
                    phone:form.phone,
                    username:form.username
                }
            }).then((res: any) => {
                if (res.code === '200') {
                    // console.log(res.data);
                    
                    newPWD.value = res.data
                    status.value = 'success'
                    ElMessage.success('重置成功')
                    
                } else {
                    status.value = 'error'
                    ElMessage.error(res.msg)
                }
            })
}
</script>

<style scoped>
.container {
    width: 50%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.step_div {
    margin: 20px;
    /* width: 200px;
    height: 200px; */
    /* background-color: aquamarine; */
}
</style>